<!doctype html>
<html>
<head>
<title>Opal M10 HD</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
/*Layout*/
body{
	margin:0;
	padding:0;
	width:100%;
  direction: ltr;
	font-size:13px;
	font-family:sans-serif;
  min-height:480px;
}

#view{
bottom: 25px;
position: absolute;
top: 35px;
width: 100%;
}
#top{
height:35px;
}
#top h1{
height:35px;
margin:0;
}
#bottom{
bottom: 0px;
height: 25px;
margin-bottom: 1px;
position: absolute;
width: 100%;
}

.left-con{
height: 100%;
position: absolute;
width: 320px;
}
.right-con{
height: 100%;
left: 320px;
position: absolute;
right: 0px;
}

.photo{
-webkit-box-shadow: black 1px 1px 3px;
-webkit-transform: rotate(7deg);
-moz-box-shadow: black 1px 1px 3px;
-moz-transform: rotate(7deg);
background: white;
float: left;
margin: 5px;
padding: 5px;
}
.photo img{
  display:block;
  border:0;
}
.v-con{
overflow: auto;
position: absolute;
width: 100%;
top:0;
bottom:0;
}
.clear{
clear:both;
}

</style>
</head>
<body>
	<div id="top">
		<h1>Opal M10 HD</h1>
	</div>
<div id="view">
  <div class="left-con" style="background:#AAA;">
    <div class="v-con">
      <div class="p-con" id="pList">
      
      <p class="photoset">杂图</p>
        <a href="http://farm3.static.flickr.com/2737/4421460604_4504aa38e9.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2737/4421460604_4504aa38e9_s.jpg"></a><a href="http://farm5.static.flickr.com/4008/4420696249_27561b93a9.jpg" class="photo" target="_blank"><img src="http://farm5.static.flickr.com/4008/4420696249_27561b93a9_s.jpg"></a><a href="http://farm5.static.flickr.com/4013/4522859224_03b7d6539c.jpg" class="photo" target="_blank"><img src="http://farm5.static.flickr.com/4013/4522859224_03b7d6539c_s.jpg"></a><a href="http://farm2.static.flickr.com/1031/4731413995_3b7d257066.jpg" class="photo" target="_blank"><img src="http://farm2.static.flickr.com/1031/4731413995_3b7d257066_s.jpg"></a><a href="http://farm5.static.flickr.com/4040/4536231525_4a16bd39f7.jpg" class="photo" target="_blank"><img src="http://farm5.static.flickr.com/4040/4536231525_4a16bd39f7_s.jpg"></a><a href="http://farm3.static.flickr.com/2569/4522859024_7947f9095b.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2569/4522859024_7947f9095b_s.jpg"></a><a href="http://farm3.static.flickr.com/2752/4522224939_e4ab47ef69.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2752/4522224939_e4ab47ef69_s.jpg"></a><a href="http://farm5.static.flickr.com/4012/4522224833_19de22dc7c.jpg" class="photo" target="_blank"><img src="http://farm5.static.flickr.com/4012/4522224833_19de22dc7c_s.jpg"></a><a href="http://farm3.static.flickr.com/2710/4522224625_9b30572cbe.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2710/4522224625_9b30572cbe_s.jpg"></a><a href="http://farm5.static.flickr.com/4022/4522224379_7fabf608bc.jpg" class="photo" target="_blank"><img src="http://farm5.static.flickr.com/4022/4522224379_7fabf608bc_s.jpg"></a><a href="http://farm5.static.flickr.com/4003/4204877402_de7a71b1cb.jpg" class="photo" target="_blank"><img src="http://farm5.static.flickr.com/4003/4204877402_de7a71b1cb_s.jpg"></a><a href="http://farm3.static.flickr.com/2604/4204877128_11076dabd4.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2604/4204877128_11076dabd4_s.jpg"></a><a href="http://farm3.static.flickr.com/2757/4204876892_e4724eb184.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2757/4204876892_e4724eb184_s.jpg"></a><a href="http://farm5.static.flickr.com/4037/4204120103_a9eae37a53.jpg" class="photo" target="_blank"><img src="http://farm5.static.flickr.com/4037/4204120103_a9eae37a53_s.jpg"></a><a href="http://farm3.static.flickr.com/2784/4204876416_883e014eaf.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2784/4204876416_883e014eaf_s.jpg"></a><a href="http://farm3.static.flickr.com/2745/4204876182_668f37c4e8.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2745/4204876182_668f37c4e8_s.jpg"></a><a href="http://farm3.static.flickr.com/2728/4204875852_8bce66cc64.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2728/4204875852_8bce66cc64_s.jpg"></a><a href="http://farm3.static.flickr.com/2791/4204875526_6aa64d4e15.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2791/4204875526_6aa64d4e15_s.jpg"></a><a href="http://farm3.static.flickr.com/2723/4204116635_44c5de8440.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2723/4204116635_44c5de8440_s.jpg"></a><a href="http://farm3.static.flickr.com/2725/4204088047_1432c54e0c.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2725/4204088047_1432c54e0c_s.jpg"></a><a href="http://farm3.static.flickr.com/2654/4204843928_0ea7d9677d.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2654/4204843928_0ea7d9677d_s.jpg"></a>
        <div class="clear"></div>
      
      <p class="photoset">09ChinaJoy</p>
        <a href="http://farm3.static.flickr.com/2623/3789664581_1f13805db2.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2623/3789664581_1f13805db2_s.jpg"></a><a href="http://farm4.static.flickr.com/3517/3790479234_9eea71c6b1.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3517/3790479234_9eea71c6b1_s.jpg"></a><a href="http://farm4.static.flickr.com/3550/3790479506_cc74924292.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3550/3790479506_cc74924292_s.jpg"></a><a href="http://farm3.static.flickr.com/2600/3789665559_80488f827f.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2600/3789665559_80488f827f_s.jpg"></a><a href="http://farm3.static.flickr.com/2635/3789665919_533ffa5672.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2635/3789665919_533ffa5672_s.jpg"></a><a href="http://farm4.static.flickr.com/3491/3790480612_65d0059228.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3491/3790480612_65d0059228_s.jpg"></a><a href="http://farm3.static.flickr.com/2561/3790481180_5a718875fa.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2561/3790481180_5a718875fa_s.jpg"></a><a href="http://farm3.static.flickr.com/2607/3790481520_026d434a8b.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2607/3790481520_026d434a8b_s.jpg"></a><a href="http://farm4.static.flickr.com/3574/3789667465_680189a29c.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3574/3789667465_680189a29c_s.jpg"></a><a href="http://farm3.static.flickr.com/2632/3790482056_707a427069.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2632/3790482056_707a427069_s.jpg"></a><a href="http://farm3.static.flickr.com/2564/3790482444_4a4818f4e9.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2564/3790482444_4a4818f4e9_s.jpg"></a><a href="http://farm3.static.flickr.com/2529/3790482846_0f601e50da.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2529/3790482846_0f601e50da_s.jpg"></a><a href="http://farm4.static.flickr.com/3490/3789668777_8ae2b5fa67.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3490/3789668777_8ae2b5fa67_s.jpg"></a><a href="http://farm3.static.flickr.com/2665/3789669085_ee33cf5de5.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2665/3789669085_ee33cf5de5_s.jpg"></a><a href="http://farm3.static.flickr.com/2428/3789669311_1634e6c9c0.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2428/3789669311_1634e6c9c0_s.jpg"></a><a href="http://farm4.static.flickr.com/3600/3790484106_90d407b1c3.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3600/3790484106_90d407b1c3_s.jpg"></a><a href="http://farm3.static.flickr.com/2607/3790484298_ee86fe4cfa.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2607/3790484298_ee86fe4cfa_s.jpg"></a><a href="http://farm4.static.flickr.com/3508/3790484654_04cdf86564.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3508/3790484654_04cdf86564_s.jpg"></a><a href="http://farm3.static.flickr.com/2660/3790484952_68f20a2576.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2660/3790484952_68f20a2576_s.jpg"></a><a href="http://farm3.static.flickr.com/2517/3790485240_12e69d0fdf.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2517/3790485240_12e69d0fdf_s.jpg"></a><a href="http://farm3.static.flickr.com/2542/3789671017_a790460c29.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2542/3789671017_a790460c29_s.jpg"></a><a href="http://farm4.static.flickr.com/3554/3789671285_67bc43d268.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3554/3789671285_67bc43d268_s.jpg"></a><a href="http://farm3.static.flickr.com/2481/3789671499_c55e2ab7cb.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2481/3789671499_c55e2ab7cb_s.jpg"></a><a href="http://farm3.static.flickr.com/2614/3790486306_afd8f83da8.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2614/3790486306_afd8f83da8_s.jpg"></a><a href="http://farm3.static.flickr.com/2497/3789672091_4c24c53235.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2497/3789672091_4c24c53235_s.jpg"></a><a href="http://farm3.static.flickr.com/2573/3790486766_05911a6c6a.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2573/3790486766_05911a6c6a_s.jpg"></a><a href="http://farm4.static.flickr.com/3570/3790486934_8a47994726.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3570/3790486934_8a47994726_s.jpg"></a><a href="http://farm3.static.flickr.com/2521/3790487206_86b3bcf8f3.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2521/3790487206_86b3bcf8f3_s.jpg"></a><a href="http://farm3.static.flickr.com/2512/3790487484_552efc5360.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2512/3790487484_552efc5360_s.jpg"></a><a href="http://farm4.static.flickr.com/3564/3790487656_2631ed980f.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3564/3790487656_2631ed980f_s.jpg"></a><a href="http://farm4.static.flickr.com/3545/3789673357_bda562caa9.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3545/3789673357_bda562caa9_s.jpg"></a><a href="http://farm4.static.flickr.com/3478/3790488172_26320f02bb.jpg" class="photo" target="_blank"><img src="http://farm4.static.flickr.com/3478/3790488172_26320f02bb_s.jpg"></a><a href="http://farm3.static.flickr.com/2602/3790488350_da1d0b3661.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2602/3790488350_da1d0b3661_s.jpg"></a><a href="http://farm3.static.flickr.com/2441/3790488620_0aff98bb6f.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2441/3790488620_0aff98bb6f_s.jpg"></a><a href="http://farm3.static.flickr.com/2443/3790488896_df518b9d98.jpg" class="photo" target="_blank"><img src="http://farm3.static.flickr.com/2443/3790488896_df518b9d98_s.jpg"></a>
        <div class="clear"></div>
      
            </div>
    </div>
  </div>
  <div class="right-con" style="background:#BBB;">
  	<div class="v-con">
  	  <img src="" alt="" id="photoView"/>
  	</div>
  </div>
</div>
	<div id="bottom">
		&copy;
	</div>
<script type="text/javascript">
  var pItems = document.getElementById("pList").getElementsByTagName("a");
  for(var i = 0; i < pItems.length; i++){
  	pItems[i].onclick = function(){
  		document.getElementById("photoView").setAttribute("src",this.getAttribute("href"));
	    return false;
  	}
  }
</script>
</body>
</html>